import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    ListView,
    TouchableOpacity,
    ToastAndroid,
	Image,
	Dimensions,
	TextInput,
	Button,
 	ScrollView,
	FlatList,
	TouchableNativeFeedback,
} from 'react-native';
import { Modal,TouchableHighlight,PixelRatio} from "react-native";
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import Toast from './component/Toast';
import BackImage from './component/BackImage';

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
const WIN_WIDTH = Dimensions.get('window').width;

class ChargeScene extends Component {
	
	static navigationOptions =({ navigation }) => ({
  		title: '用户查询',
		headerStyle: {
		  backgroundColor: 'rgba(0, 191 ,255, 0.5)',
		},
		headerBackImage:<BackImage/>, //使用组件
		headerTintColor: '#fff',
		headerTitleStyle: {
		  fontWeight: 'bold',
		},
		headerRight:(
			<TouchableOpacity 
				activeOpacity={0.5} 
				onPress={navigation.getParam('setModalVisible')}>
				<Image style={{height: 40, width: 50,marginRight:10}} source={require('../img/search.png')}/>
			</TouchableOpacity>
		)
  	});

    constructor(props){        
		super(props);                
		this.state = {              
			animationType: 'none',//none slide fade
			modalVisible: false,//模态场景是否可见
			transparent: false,//是否透明显示
			custCode:'',
			custName:'',
			bookName:'',
			count:'', 
			dataSource:'',  
	 	};   
	}
		
	setModalVisible = (visible) => {
    	this.setState({ modalVisible: visible });
    }
 
    //组件挂载完成后执行的方法
    componentDidMount(){
		this.props.navigation.setParams({ setModalVisible: this.setModalVisible });
    }
    
    //下载数据   
	getData(pyCode,custCode,custName) { 
		let formData = new FormData();  
		formData.append("pyCode",pyCode); 
		formData.append("custCode",custCode); 
		formData.append("custName",custName); 
       	var opts = {  
       		method:"POST",  
        	body:formData  
       	}
	   	fetch(global.server.url+'/custInfo/selectList',opts)
		.then((response) => response.json())
		.then((jsonData) => {
			let count=0;
			let datas = [];
            datas = datas.concat(jsonData);
			var dataSource= {
			  tab:'全部',
			  list:datas
			} 
            this.setState({
				loaded:true,
				count:datas.length,   
                dataSource:dataSource        
            });
		})
		.catch((error) => {
			 alert("costMaster:"+error);
	  	});
	} 

    render() {
        //加载后
        return (
			<FlatList 
				tabLabel ={this.state.dataSource.tab}
				data = {this.state.dataSource.list}
				renderItem = {({item}) =>
					<TouchableNativeFeedback
						onPress = {() => {
							this.props.navigation.navigate('PayScene', {custCode:item.custCode})
					}}>
						<View style={styles.textMainStyle}>
							<Text style={styles.margin}>表本名称： {item.bookName}</Text>
							<Text style={styles.margin}>用户编号：{item.custCode}</Text>
							<Text style={styles.margin}>用户名称：{item.custName}</Text>
							<Text style={styles.margin}>用户地址：{item.address}</Text>
							<Text style={styles.margin}>联系电话： {item.tel}</Text>
						</View>
					</TouchableNativeFeedback>
				}
				ListHeaderComponent={this._renderHeader()}
				ListEmptyComponent={this.emptyComponent}
			/>	
        );
    }

	searchData(){
		let pyCode=this.state.pyCode;
		let custCode=this.state.custCode;
		let custName=this.state.custName;
		this.getData(pyCode,custCode,custName);
		this.setModalVisible(false);
	}
	
	emptyComponent() {
		return (
		<View style={{
			backgroundColor: 'white', flex: 1, height: 500, alignItems: 'center',
			justifyContent: 'center',
		}}>
			<Text>抱歉，没有符合条件的记录，请核对查询条件！</Text>
		</View>)
	}
	
	//渲染头部
	 _renderHeader = () => {
         return(
            <View style={styles.header}>
                <Text style={styles.headerText}>总数：{this.state.count}</Text>
                <View style={styles.headerSeparator}>
				</View>
				<View style={{alignItems:'center',flex:1}}>
					<Modal
						animationType={this.state.animationType}
						transparent={this.state.transparent}
						visible={this.state.modalVisible}
						onRequestClose={() => { 
						  this.setModalVisible(false) 
						}}
					 >
						<View style={[styles.modalContainer,{backgroundColor: 'rgba(0, 0, 0, 0.5)'}]}>
							<View style={[styles.innerContainer,{backgroundColor: '#F0F8FF', padding: 20}]}>
								<View style={styles.row}>
									<View >
									  <Text style={styles.tips}>请输入一个或多个条件</Text>
									</View>
									<TextInput
										style={styles.textInput}
										placeholder={'拼音码'}
										onChangeText={(text) => {
											this.pyCode = text;
											this.setState({pyCode: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
									<TextInput
										style={styles.textInput}
										placeholder={'用户名称'}
										onChangeText={(text) => {
											this.custName = text;
											this.setState({custName: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
									<TextInput
										style={styles.textInput}
										placeholder={'用户编号'}
										onChangeText={(text) => {
											this.custCode = text;
											this.setState({custCode: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
								</View>
								<Text
									onPress={this.setModalVisible.bind(this,false) }
									style={{fontSize:20,marginTop:10}}>
									关闭
								</Text>
								<Text
									onPress={this.searchData.bind(this)}
									style={{fontSize:20,marginTop:10}}>
									确定
								</Text>
							</View>  
						</View>
					</Modal>
      			</View>
            </View>
        )
    }
}

var width = WIN_WIDTH/2;
const styles = StyleSheet.create({
   textMainStyle: {
     flex: 1,
     backgroundColor: 'white',
     padding: 10,
     paddingVertical:20,
     marginLeft: 5,
     marginRight: 5,
     marginVertical: 3,
     borderColor: '#dddddd',
     borderStyle: null,
     borderWidth: 0.5,
     borderRadius: 2,
     shadowColor: 'gray',    // 设置阴影
     shadowOffset: {width:0.5, height: 0.5},  
     shadowOpacity: 0.4,   // 透明度
     shadowRadius: 1,
     elevation:2   //   高度，设置Z轴，可以产生立体效果
   },
   header:{
     height:44,
     backgroundColor:"#F5FCFF",
   },
   headerText:{
   	flex:1,
    fontSize:16,
    fontWeight:"bold",
    textAlign:"right",
	marginTop:5,
	marginRight:10,
   },
   headerSeparator:{
    height:1,
    backgroundColor:"black",
   },
	modalContainer:{
		flex: 1,
		justifyContent: 'center',
		padding: 40,
  	},
	innerContainer: {
		borderRadius: 10,
		alignItems: 'center',
    },
	tips:{
		textAlign: 'center',
		marginBottom: 5,
		fontSize: 20
	},
	textInput: {
        height: 40,
        width: width,
        marginBottom: 5,
        backgroundColor: 'white',
        textAlign: 'center',
		borderRadius:5
    },
});
module.exports = ChargeScene;
